<template>
    <!-- 弹出框一 -->
    <vol-box :lazy="true" v-model="model3" title="审核" :width="700" :padding="5" :onModelClose="onModelClose">
        <el-form :model="form" ref="formRef">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="流水号">
                        <el-input v-model="form.DealWithId" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款方式">
                        <el-select v-model="form.Ordertype">
                            <el-option v-for="item in selectOne" :label="item.value" :value="item.key" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="最后付款日">
                        <el-date-picker v-model="form.EndOrderTime" type="date" :size="size" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款金额">
                        <el-input v-model="form.ActualPrice"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.Remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button type="primary" @click="closeModel3">确认</el-button>
                <el-button type="default" @click="model3 = false">关闭</el-button>
                <el-button type="primary" @click="ChangeState(2, form.DealWithId)">审核通过</el-button>
                <el-button type="primary" @click="ChangeState(3, form.DealWithId)">审核不通过</el-button>
            </div>
        </template>
    </vol-box>
    <vol-box :lazy="true" v-model="model2" title="新增实付" :width="700" :onModelClose="onModelClose">
        <el-form :model="form" ref="formRef">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="流水号">
                        <el-input v-model="form.DealWithId" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款方式">
                        <el-select v-model="form.Ordertype">
                            <el-option v-for="item in selectOne" :label="item.value" :value="item.key" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="最后付款日">
                        <el-date-picker v-model="form.EndOrderTime" type="date" :size="size" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款金额">
                        <el-input v-model="form.ActualPrice"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.Remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button type="primary" size="small" @click="handleSubmit">确认</el-button>
                <el-button type="default" size="small" @click="model2 = false">关闭</el-button>
            </div>
        </template>
    </vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
import axios from 'axios';
import { onMounted } from 'vue';

export default {
    components: { 'vol-box': VolBox },
    methods: {},
    data() {
        return {
            model2: false,
            model2Row: {},
            model3: false,
            model3Rows: [], //弹出框1传入的选中行
            form: {
                ActualPrice: 0,
                CreateTime: "",
                DealWithId: "",
                DealWithName: "",
                DealWithPrice: 0,
                EndOrderTime: "",
                IsDeleted: 0,
                Ordertype: "",
                PayReceState: 0,
                Payee: "",
                Payer: "",
                Remark: "",
                ResiduePrice: 0,
            },
            selectOne: []
        };
    },
    mounted() {
        this.getSelect();
    },
    methods: {

        openModel2(row, column, index) {
            this.model2Row = row;
            this.model2 = true;
            this.form = row;
            console.log(this.form)
        },
        openModel3(rows, column, index) { //弹出框1
            this.model3Rows = rows;
            this.model3 = true;
            this.form = row;
            console.log(this.form)
        },
        callParent() {
            this.$emit('parentCall', $parent => {
                $parent.search();
                this.$message.success('调用了刷新')
            })
        },
        handleSubmit() {
            if (this.form.ActualPrice > this.form.DealWithPrice) {
                this.$message.error('实付金额不能大于应付金额')
                return;
            }
            console.log(this.form)
            axios.post('http://localhost:9991/api/DealWith/UpdatePrice', this.form).then(res => {
                if (res.data > 0) {
                    this.callParent();
                } else {
                    this.$message.error(res.data)
                }
            })
            this.model2 = false;
        },
        getSelect() {
            axios.get("http://localhost:9991/api/DealWith/GetSelectOne").then(res => {
                this.selectOne = res.data
            })
        },
        ChangeState(state, DealWithId) {
            console.log(state, DealWithId)
            axios.get(`http://localhost:9991/api/DealWith/ChangeState?state=${state}&DealWithId=${DealWithId}`).then(res => {
                if (res.data > 0) {
                    this.callParent();
                    this.model3 = false;
                } else {
                    this.$message.error(res.data)
                }
            })
        }

    }
};



</script>

<style scoped>
.dialog-footer {
    text-align: right;
}
</style>